<template>
	<view class="container">
		<uni-nav-bar @clickLeft="clickLeft" fixed="true" left-icon="arrowleft" title="手机号注册" background-color="#d44439" color="white"></uni-nav-bar>
		<view class="userinfo">
			<view>
				<text style="color:#666;font-size: 12px;">昵称：</text>
				<input placeholder="请输入昵称" v-model="name" />
			</view>
			<view>
				<text style="color:#666;font-size: 12px;">手机号：</text>
				<input placeholder="请输入手机号" v-model="phoneNumber" type="number" />
			</view>
			<view>
				<text style="color:#666;font-size: 12px;">密码：</text>
				<input placeholder="设置登录密码 , 不得少于8位" password v-model="password" />
			</view>
			<view>
				<text style="color:#666;font-size: 12px;">验证码：</text>
				<input placeholder="请输入4位数验证码" v-model="yanzhengma" type="number" />
				<button :disabled="isDisabled" @click="send">{{buttonText}}</button>
			</view>
		</view>
		<button class="zhuce" @click="check">注册</button>
	</view>
</template>

<script>
	import {
		verify,
		cellphone,
		check,
		sent
	} from '../../api/login/login.js'
	import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				name: '',
				phoneNumber: null,
				password: '',
				yanzhengma: null,
				buttonText: '发送验证码',
				isDisabled: false,
				s: 60
			}
		},
		methods: {
			check() {
				if (this.name === '') {
					uni.showToast({
						title: '请输入昵称',
						duration: 2000,
						icon: 'none'
					})
				} else if (this.phoneNumber === null || this.phoneNumber === '') {
					uni.showToast({
						title: '请输入手机号',
						duration: 2000,
						icon: 'none'
					})
				} else if (this.password === '') {
					uni.showToast({
						title: '请输入密码',
						duration: 2000,
						icon: 'none'
					})
				} else if (this.phoneNumber.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						duration: 2000,
						icon: 'none'
					})
				} else if (this.password.length < 8) {
					uni.showToast({
						title: '密码长度不少于8位',
						duration: 2000,
						icon: 'none'
					})
				} else if (this.yanzhengma === null || this.yanzhengma === '') {
					uni.showToast({
						title: '请输入验证码',
						duration: 2000,
						icon: 'none'
					})
				} else if (this.yanzhengma.length != 4) {
					uni.showToast({
						title: '请输入正确的验证码',
						duration: 2000,
						icon: 'none'
					})
				} else {
					const that = this
					//检查验证码是否正确
					verify({
						phone: that.phoneNumber,
						captcha: that.yanzhengma
					}).then(res => {
						if (res.code === 200) {
							//检查手机号是否注册
							check({
								phone: that.phoneNumber
							}).then(res => {
								if (res.hasPassword === true) {
									uni.showToast({
										title: '该账号已注册,请返回登陆页面登陆',
										duration: 2000,
										icon: 'none'
									})
									setTimeout(() => {
										uni.reLaunch({
											url: '../tabbar/login/login'
										})
									}, 3000)
								} else {
									//注册
									cellphone({
										nickname: that.name,
										phone: that.phoneNumber,
										password: that.password,
										captcha: that.yanzhengma
									}).then(res => {
										if (res.code === 505) {
											uni.showToast({
												title: '该昵称已占用',
												duration: 2000,
												icon: 'none'
											})
										} else if (res.code === 200) {
											uni.showToast({
												title: '注册成功',
												duration: 2000,
												icon: 'none'
											})
										}
									})
								}
							})
						}
					}).catch(err => {
						uni.showToast({
							title: err.data.message,
							duration: 2000,
							icon: 'none'
						})
					})
				}
			},
			send() {
				//发送验证码
				sent({
					phone: this.phoneNumber
				}).then(res => {
					if (res.message === "发送验证码超过限制:每个手机号一天只能发5条验证码") {
						uni.showToast({
							title: "发送验证码超过限制:每个手机号一天只能发5条验证码",
							duration: 5000,
							icon: 'none'
						})
					} else if (res.message === "手机号码不符合规范") {
						uni.showToast({
							title: "手机号码不符合规范",
							duration: 5000,
							icon: 'none'
						})
					} else {
						this.isDisabled = true
						let time = setInterval(() => {
							if (this.s === 0) {
								this.isDisabled = false
								this.buttonText = '发送验证码'
								clearInterval(time)
								this.s = 60
							} else {
								this.buttonText = '还剩' + this.s-- + '再发送'
							}
						}, 1000)
					}
				})
			},
			clickLeft() {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		components: {
			uniNavBar
		}
	}
</script>

<style lang="scss">
	.container {
		width: 750rpx;

		.userinfo {
			width: 100%;
			height: 800rpx;
			//background-color: green;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			input {
				margin-top: 20rpx;
				width: 440rpx;
				height: 64rpx;
				font-size: 24rpx;
				border: 1px solid #cdcdcd;
				margin-bottom: 20rpx;
				padding-left: 12rpx;
			}
		}

		.zhuce {
			width: 700rpx;
			border-radius: 200rpx;
			color: white;
			background-color: #007AFF;
			margin-top: 200rpx;
		}
	}
</style>
